<template>
<div class="bg">
<dv-full-screen-container>
    <dv-border-box-10>
        <!-- 标题 -->
        <div class="module-box ">
            <div style="flex:0 1 10%">
                 <dv-decoration-8 style="width:300px;height:50px;" />
            </div>
            <div style="flex:0 1 80%;">
                <dv-decoration-11 style="width:400px;height:60px;margin: auto;justify-content:center">
                    <div style="display: flex; justify-content: center; align-items: center; font-size:20px; color: #fff;">
                        Philo数据运营中心
                        <el-icon :size="22" style="color: #fff;margin-left: 19px;" @click="$router.push('/index')"><SwitchButton /></el-icon>
                    </div>
                </dv-decoration-11>
            </div>
            <div style="flex:0 1 10%">
                <dv-decoration-8 :reverse="true" style="width:300px;height:50px;" />
            </div>
        </div>

        <!-- 第一行 -->
        <div class="module-box">
            
                <dv-border-box-9 style="width:100%; height:200px;">
                
                </dv-border-box-9>
                <dv-border-box-10  style="width:100%; height:200px;">dv-border-box-8</dv-border-box-10>
           
        </div>

        <!-- 第二行 -->
        <div class="module-box ">
            <div style="flex:0 1 25%">
                <dv-border-box-12 style="width:100%;height:200px;">
                <!-- <dv-capsule-chart config="config"style="width:100%;height:200px"/> -->
                </dv-border-box-12>
                <dv-border-box-8 style="width:100%;height:300px;"><dv-active-ring-chart :config="config31" style="width:200px;height:200px" /></dv-border-box-8>
            </div>
            <div style="flex:0 1 50%">
                <dv-border-box-1 style="width:100%;height:600px; margin: 10px;">
                <lineChartVue />
                </dv-border-box-1>
            </div>
            <div style="flex:0 1 25%">
                <dv-border-box-8 style="width:100%;height:300px;">dv-border-box-3</dv-border-box-8>
                <dv-border-box-10 style="width:100%;height:300px;">dv-border-box-3</dv-border-box-10>
            </div>
        </div>




        <!-- 第三行 -->
        <!-- <div class="module-box ">
            <div style="flex:0 1 50%">
                 <dv-border-box-8 style="width:100%;height:200px;">
                 
                 </dv-border-box-8>
            </div>
            <div style="flex:0 1 25%">
                <dv-border-box-9 style="width:100%;height:200px;">dv-border-box-3</dv-border-box-9>
            </div>
            <div style="flex:0 1 25%">
                <dv-border-box-10 style="width:100%;height:200px;">dv-border-box-3</dv-border-box-10>
            </div>
        </div> -->
    </dv-border-box-10>
</dv-full-screen-container>
</div>
</template>

<script>
import lineChartVue from './components/lineChart.vue'

export default {
name: "index",
components:{
lineChartVue
},
data() {
    return {
 
        config31:{
            data: [
            {
            name: '周口',
            value: 55
            },
            {
            name: '南阳',
            value: 120
            },
            {
            name: '西峡',
            value: 78
            },
            {
            name: '驻马店',
            value: 66
            },
            {
            name: '新乡',
            value: 80
            }
        ]
}


    }
},


}
</script>
<style>
.bg {
    /* background:  url("../../assets/bgdata.jpg"); */
    background-size: cover;
    height: 100vh; /* 设置背景高度为屏幕高度 */
  }
.module-box {
  display: flex;
  justify-content: space-between;
  
  flex-direction: row; /* 修改：横向布局 */
  margin: 5px;
}
.d-flex {
    display: flex;
}
</style>